<!--
 * @Description: 侧边
 * @Author: 阳婷
 * @Date: 2021-03-18 14:14:43
 * @LastEditTime: 2023-05-12 13:58:26
 * @LastEditors: 阳婷
-->
<template>
    <div class="sideBox">
        <div class="sideBoxInfo">
            <el-form ref="form" :rules="rules" :model="form" label-width="140px">
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="form.name" clearable @change="setName"></el-input>
                </el-form-item>
                <!-- <el-form-item label="所属客户" prop="customer">
                    <el-select class="input-full" v-model="form.customer_id" filterable placeholder="所属客户">
                        <el-option v-for="item in customers" :key="item.id" :label="item.customer_name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="角色" v-show="form.id!=''">
                    <el-input v-model="form.roleName" disabled></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="footerBtn">
            <el-button @click="onSubmit" type="primary" size="small">保存</el-button>
        </div>
    </div>
</template>
<script>
    import {
        deepCopy,
        isEmptyObject
    } from "@/utils/index"
    export default {
        props: ["rowData"],
        data() {
            return {
                rules: {
                    name: [{
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur"
                    }]
                },
                options2: [],
                form: {
                    created_at: "",
                    email: "",
                    id: 0,
                    name: "",
                    remark: "",
                    updated_at: "",
                    username: "",
                    status: 0,
                    password: "",
                    password_confirmation: ""
                }
            }
        },
        watch: {
            rowData() {
                this.clearData();
                if (!isEmptyObject(this.rowData)) {
                    this.form = deepCopy(this.rowData);
                }
            }
        },
        mounted() {
            this.clearData();
            if (!isEmptyObject(this.rowData)) {
                this.form = deepCopy(this.rowData)
            }
        },
        methods: {
            setName(val) {
                if (!val.trim()) {
                    this.$message({
                        type: "warning",
                        message: "用户名不能为空！"
                    })
                } else if (!isNaN(parseInt(val))) {
                    this.$message({
                        type: "warning",
                        message: "用户名不能以数字开头！"
                    })
                } else if (val.length >= 20) {
                    this.$message({
                        type: "warning",
                        message: "用户名长度必须小于20！"
                    })
                } else {
                    this.form.name = val
                }
            },
            onSubmit() {
                if (this.form.name) {
                    if (!this.form.name.trim()) {
                        this.$message({
                            type: "warning",
                            message: "用户名不能为空！"
                        })
                    } else if (!isNaN(parseInt(this.form.name))) {
                        this.$message({
                            type: "warning",
                            message: "用户名不能以数字开头！"
                        })
                    } else if (this.form.name.length >= 20) {
                        this.$message({
                            type: "warning",
                            message: "用户名长度必须小于20！"
                        })
                    } else {
                        if (this.form.id) {
                            this.edit()
                        } else {
                            this.add()
                        }

                    }
                } else {
                    this.$message({
                        type: "warning",
                        message: "用户名必须填写"
                    })
                }
            },
            edit() {
                this.$ajax("put", "/api/admin", this.form, data => {
                    if (data.code == 200) {
                        this.clearData();
                        this.closeBox()
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            add() {
                this.$ajax("post", "/api/admin", this.form, data => {
                    if (data.code == 200) {
                        this.clearData();
                        this.closeBox()
                    }
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            },
            // update() {
            //     this.$ajax("put", "/api/users/" + this.form.id, this.form, data => {
            //         if (data.code == 200) {
            //             this.clearData()
            //             this.closeBox()
            //         }
            //         this.$message({
            //             type: "success",
            //             message: data.msg
            //         })
            //     })
            // },
            closeBox() {
                this.$parent.$parent.$parent.show = false
                this.$parent.$parent.$parent.getData()
            },
            clearData() {
                this.form = {
                    created_at: "",
                    email: "",
                    id: '',
                    name: "",
                    remark: "",
                    // roles: "",
                    updated_at: "",
                    username: "",
                    status: 0,
                    password: "",
                    password_confirmation: ""
                }
            }
        }
    }
</script>